<template>
    <div class="sidebar">
      <h2><i class="fas fa-chart-line"></i> 概览</h2>
      
      <div class="stats">
        <StatsCard :value="stats.total" label="总任务数" />
        <StatsCard :value="stats.inProgress" label="进行中" />
        <StatsCard :value="stats.pending" label="待处理" />
        <StatsCard :value="stats.completed" label="已完成" />
      </div>
      
      <div class="filter-section">
        <h3><i class="fas fa-filter"></i> 状态筛选</h3>
        <div class="filter-options">
          <FilterOption 
            value="all" 
            :active="statusFilter === 'all'"
            @select="setFilter('status', 'all')"
          >
            <i class="fas fa-list"></i>
            <span>全部任务</span>
          </FilterOption>
          <FilterOption 
            value="pending" 
            :active="statusFilter === 'pending'"
            @select="setFilter('status', 'pending')"
          >
            <i class="fas fa-hourglass-half"></i>
            <span>待处理</span>
          </FilterOption>
          <FilterOption 
            value="in-progress" 
            :active="statusFilter === 'in-progress'"
            @select="setFilter('status', 'in-progress')"
          >
            <i class="fas fa-spinner"></i>
            <span>进行中</span>
          </FilterOption>
          <FilterOption 
            value="completed" 
            :active="statusFilter === 'completed'"
            @select="setFilter('status', 'completed')"
          >
            <i class="fas fa-check-circle"></i>
            <span>已完成</span>
          </FilterOption>
        </div>
      </div>
      
      <div class="filter-section">
        <h3><i class="fas fa-fire"></i> 优先级</h3>
        <div class="filter-options">
          <FilterOption 
            value="all" 
            :active="priorityFilter === 'all'"
            @select="setFilter('priority', 'all')"
          >
            <i class="fas fa-flag"></i>
            <span>全部优先级</span>
          </FilterOption>
          <FilterOption 
            value="low" 
            :active="priorityFilter === 'low'"
            @select="setFilter('priority', 'low')"
          >
            <span class="priority-badge priority-low">低</span>
            <span>低优先级</span>
          </FilterOption>
          <FilterOption 
            value="medium" 
            :active="priorityFilter === 'medium'"
            @select="setFilter('priority', 'medium')"
          >
            <span class="priority-badge priority-medium">中</span>
            <span>中优先级</span>
          </FilterOption>
          <FilterOption 
            value="high" 
            :active="priorityFilter === 'high'"
            @select="setFilter('priority', 'high')"
          >
            <span class="priority-badge priority-high">高</span>
            <span>高优先级</span>
          </FilterOption>
        </div>
      </div>
      
      <div class="filter-section">
        <h3><i class="fas fa-tag"></i> 分类</h3>
        <div class="filter-options">
          <FilterOption 
            value="all" 
            :active="categoryFilter === 'all'"
            @select="setFilter('category', 'all')"
          >
            <i class="fas fa-layer-group"></i>
            <span>全部分类</span>
          </FilterOption>
          <FilterOption 
            value="work" 
            :active="categoryFilter === 'work'"
            @select="setFilter('category', 'work')"
          >
            <i class="fas fa-briefcase" style="color: #4361ee;"></i>
            <span>工作</span>
          </FilterOption>
          <FilterOption 
            value="personal" 
            :active="categoryFilter === 'personal'"
            @select="setFilter('category', 'personal')"
          >
            <i class="fas fa-home" style="color: #4cc9f0;"></i>
            <span>个人</span>
          </FilterOption>
          <FilterOption 
            value="shopping" 
            :active="categoryFilter === 'shopping'"
            @select="setFilter('category', 'shopping')"
          >
            <i class="fas fa-shopping-cart" style="color: #f8961e;"></i>
            <span>购物</span>
          </FilterOption>
          <FilterOption 
            value="health" 
            :active="categoryFilter === 'health'"
            @select="setFilter('category', 'health')"
          >
            <i class="fas fa-heart" style="color: #f72585;"></i>
            <span>健康</span>
          </FilterOption>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { computed } from 'vue'
  import { useTaskStore } from '@/stores/taskStore'
  import StatsCard from './StatsCard.vue'
  import FilterOption from './FilterOption.vue'
  
  const taskStore = useTaskStore()
  
  const stats = computed(() => taskStore.stats)
  const statusFilter = computed(() => taskStore.statusFilter)
  const priorityFilter = computed(() => taskStore.priorityFilter)
  const categoryFilter = computed(() => taskStore.categoryFilter)
  
  function setFilter(type, value) {
    taskStore.setFilter(type, value)
  }
  </script>
  
  <style scoped>
  .sidebar {
    background: white;
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 25px;
    height: fit-content;
  }
  
  .sidebar h2 {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 25px;
  }
  
  .filter-section {
    margin-bottom: 25px;
  }
  
  .filter-section h3 {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .filter-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  @media (max-width: 600px) {
    .stats {
      grid-template-columns: 1fr;
    }
  }
  </style>